<!DOCTYPE html>
<html>
  <head>
    <title>随机图文|AlgerKong</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style>
      /*! tailwindcss v2.2.16 | MIT License | https://tailwindcss.com */

      /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

      /*
    Document
    ========
    */

      /**
    Use a better box model (opinionated).
    */

      *,
      ::before,
      ::after {
        box-sizing: border-box;
      }

      /**
    Use a more readable tab size (opinionated).
    */

      html {
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
      }

      /**
    1. Correct the line height in all browsers.
    2. Prevent adjustments of font size after orientation changes in iOS.
    */

      html {
        line-height: 1.15;
        /* 1 */
        -webkit-text-size-adjust: 100%;
        /* 2 */
      }

      /*
    Sections
    ========
    */

      /**
    Remove the margin in all browsers.
    */

      body {
        margin: 0;
      }

      /**
    Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
    */

      body {
        font-family: system-ui, -apple-system,
          /* Firefox supports this but not yet `system-ui` */ "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      }

      /*
    Grouping content
    ================
    */

      /**
    1. Add the correct height in Firefox.
    2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
    */

      hr {
        height: 0;
        /* 1 */
        color: inherit;
        /* 2 */
      }

      /*
    Text-level semantics
    ====================
    */

      /**
    Add the correct text decoration in Chrome, Edge, and Safari.
    */

      abbr[title] {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
      }

      /**
    Add the correct font weight in Edge and Safari.
    */

      b,
      strong {
        font-weight: bolder;
      }

      /**
    1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
    2. Correct the odd 'em' font sizing in all browsers.
    */

      code,
      kbd,
      samp,
      pre {
        font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono",
          Menlo, monospace;
        /* 1 */
        font-size: 1em;
        /* 2 */
      }

      /**
    Add the correct font size in all browsers.
    */

      small {
        font-size: 80%;
      }

      /**
    Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
    */

      sub,
      sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
      }

      sub {
        bottom: -0.25em;
      }

      sup {
        top: -0.5em;
      }

      /*
    Tabular data
    ============
    */

      /**
    1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
    2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
    */

      table {
        text-indent: 0;
        /* 1 */
        border-color: inherit;
        /* 2 */
      }

      /*
    Forms
    =====
    */

      /**
    1. Change the font styles in all browsers.
    2. Remove the margin in Firefox and Safari.
    */

      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: inherit;
        /* 1 */
        font-size: 100%;
        /* 1 */
        line-height: 1.15;
        /* 1 */
        margin: 0;
        /* 2 */
      }

      /**
    Remove the inheritance of text transform in Edge and Firefox.
    1. Remove the inheritance of text transform in Firefox.
    */

      button,
      select {
        /* 1 */
        text-transform: none;
      }

      /**
    Correct the inability to style clickable types in iOS and Safari.
    */

      button {
        -webkit-appearance: button;
      }

      /**
    Remove the inner border and padding in Firefox.
    */

      /**
    Restore the focus styles unset by the previous rule.
    */

      /**
    Remove the additional ':invalid' styles in Firefox.
    See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
    */

      /**
    Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
    */

      legend {
        padding: 0;
      }

      /**
    Add the correct vertical alignment in Chrome and Firefox.
    */

      progress {
        vertical-align: baseline;
      }

      /**
    Correct the cursor style of increment and decrement buttons in Safari.
    */

      /**
    1. Correct the odd appearance in Chrome and Safari.
    2. Correct the outline style in Safari.
    */

      /**
    Remove the inner padding in Chrome and Safari on macOS.
    */

      /**
    1. Correct the inability to style clickable types in iOS and Safari.
    2. Change font properties to 'inherit' in Safari.
    */

      /*
    Interactive
    ===========
    */

      /*
    Add the correct display in Chrome and Safari.
    */

      summary {
        display: list-item;
      }

      /**
     * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
     * A thin layer on top of normalize.css that provides a starting point more
     * suitable for web applications.
     */

      /**
     * Removes the default spacing and border for appropriate elements.
     */

      blockquote,
      dl,
      dd,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      hr,
      figure,
      p,
      pre {
        margin: 0;
      }

      button {
        background-color: transparent;
        background-image: none;
      }

      fieldset {
        margin: 0;
        padding: 0;
      }

      ol,
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      /**
     * Tailwind custom reset styles
     */

      /**
     * 1. Use the user's configured `sans` font-family (with Tailwind's default
     *    sans-serif font stack as a fallback) as a sane default.
     * 2. Use Tailwind's default "normal" line-height so the user isn't forced
     *    to override it to ensure consistency even when using the default theme.
     */

      html {
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
          "Noto Color Emoji";
        /* 1 */
        line-height: 1.5;
        /* 2 */
      }

      /**
     * Inherit font-family and line-height from `html` so users can set them as
     * a class directly on the `html` element.
     */

      body {
        font-family: inherit;
        line-height: inherit;
      }

      /**
     * 1. Prevent padding and border from affecting element width.
     *
     *    We used to set this in the html element and inherit from
     *    the parent element for everything else. This caused issues
     *    in shadow-dom-enhanced elements like <details> where the content
     *    is wrapped by a div with box-sizing set to `content-box`.
     *
     *    https://github.com/mozdevs/cssremedy/issues/4
     *
     *
     * 2. Allow adding a border to an element by just adding a border-width.
     *
     *    By default, the way the browser specifies that an element should have no
     *    border is by setting it's border-style to `none` in the user-agent
     *    stylesheet.
     *
     *    In order to easily add borders to elements by just setting the `border-width`
     *    property, we change the default border-style for all elements to `solid`, and
     *    use border-width to hide them instead. This way our `border` utilities only
     *    need to set the `border-width` property instead of the entire `border`
     *    shorthand, making our border utilities much more straightforward to compose.
     *
     *    https://github.com/tailwindcss/tailwindcss/pull/116
     */

      *,
      ::before,
      ::after {
        box-sizing: border-box;
        /* 1 */
        border-width: 0;
        /* 2 */
        border-style: solid;
        /* 2 */
        border-color: currentColor;
        /* 2 */
      }

      /*
     * Ensure horizontal rules are visible by default
     */

      hr {
        border-top-width: 1px;
      }

      /**
     * Undo the `border-style: none` reset that Normalize applies to images so that
     * our `border-{width}` utilities have the expected effect.
     *
     * The Normalize reset is unnecessary for us since we default the border-width
     * to 0 on all elements.
     *
     * https://github.com/tailwindcss/tailwindcss/issues/362
     */

      img {
        border-style: solid;
      }

      textarea {
        resize: vertical;
      }

      input::-moz-placeholder,
      textarea::-moz-placeholder {
        opacity: 1;
        color: #9ca3af;
      }

      input:-ms-input-placeholder,
      textarea:-ms-input-placeholder {
        opacity: 1;
        color: #9ca3af;
      }

      input::placeholder,
      textarea::placeholder {
        opacity: 1;
        color: #9ca3af;
      }

      button {
        cursor: pointer;
      }

      /**
     * Override legacy focus reset from Normalize with modern Firefox focus styles.
     *
     * This is actually an improvement over the new defaults in Firefox in our testing,
     * as it triggers the better focus styles even for links, which still use a dotted
     * outline in Firefox by default.
     */

      table {
        border-collapse: collapse;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: inherit;
        font-weight: inherit;
      }

      /**
     * Reset links to optimize for opt-in styling instead of
     * opt-out.
     */

      a {
        color: inherit;
        text-decoration: inherit;
      }

      /**
     * Reset form element properties that are easy to forget to
     * style explicitly so you don't inadvertently introduce
     * styles that deviate from your design system. These styles
     * supplement a partial reset that is already applied by
     * normalize.css.
     */

      button,
      input,
      optgroup,
      select,
      textarea {
        padding: 0;
        line-height: inherit;
        color: inherit;
      }

      /**
     * Use the configured 'mono' font family for elements that
     * are expected to be rendered with a monospace font, falling
     * back to the system monospace stack if there is no configured
     * 'mono' font family.
     */

      pre,
      code,
      kbd,
      samp {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;
      }

      /**
     * 1. Make replaced elements `display: block` by default as that's
     *    the behavior you want almost all of the time. Inspired by
     *    CSS Remedy, with `svg` added as well.
     *
     *    https://github.com/mozdevs/cssremedy/issues/14
     * 
     * 2. Add `vertical-align: middle` to align replaced elements more
     *    sensibly by default when overriding `display` by adding a
     *    utility like `inline`.
     *
     *    This can trigger a poorly considered linting error in some
     *    tools but is included by design.
     * 
     *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
     */

      img,
      svg,
      video,
      canvas,
      audio,
      iframe,
      embed,
      object {
        display: block;
        /* 1 */
        vertical-align: middle;
        /* 2 */
      }

      /**
     * Constrain images and videos to the parent width and preserve
     * their intrinsic aspect ratio.
     *
     * https://github.com/mozdevs/cssremedy/issues/14
     */

      img,
      video {
        max-width: 100%;
        height: auto;
      }

      /**
     * Ensure the default browser behavior of the `hidden` attribute.
     */

      *,
      ::before,
      ::after {
        --tw-border-opacity: 1;
        border-color: rgba(229, 231, 235, var(--tw-border-opacity));
      }

      .m-auto {
        margin: auto;
      }

      .mx-px {
        margin-left: 1px;
        margin-right: 1px;
      }

      .my-8 {
        margin-top: 2rem;
        margin-bottom: 2rem;
      }

      .my-20 {
        margin-top: 5rem;
        margin-bottom: 5rem;
      }

      .mt-1 {
        margin-top: 0.25rem;
      }

      .mt-4 {
        margin-top: 1rem;
      }

      .mt-8 {
        margin-top: 2rem;
      }

      .mt-10 {
        margin-top: 2.5rem;
      }

      .mt-12 {
        margin-top: 3rem;
      }

      .mb-1 {
        margin-bottom: 0.25rem;
      }

      .mb-4 {
        margin-bottom: 1rem;
      }

      .mb-8 {
        margin-bottom: 2rem;
      }

      .inline-block {
        display: inline-block;
      }

      .flex {
        display: flex;
      }

      .table {
        display: table;
      }

      .w-full {
        width: 100%;
      }

      .max-w-4xl {
        max-width: 56rem;
      }

      @-webkit-keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      @-webkit-keyframes ping {
        75%,
        100% {
          transform: scale(2);
          opacity: 0;
        }
      }

      @keyframes ping {
        75%,
        100% {
          transform: scale(2);
          opacity: 0;
        }
      }

      @-webkit-keyframes pulse {
        50% {
          opacity: 0.5;
        }
      }

      @keyframes pulse {
        50% {
          opacity: 0.5;
        }
      }

      @-webkit-keyframes bounce {
        0%,
        100% {
          transform: translateY(-25%);
          -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
          animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        }

        50% {
          transform: none;
          -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }
      }

      @keyframes bounce {
        0%,
        100% {
          transform: translateY(-25%);
          -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
          animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        }

        50% {
          transform: none;
          -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }
      }

      .flex-col {
        flex-direction: column;
      }

      .overflow-auto {
        overflow: auto;
      }

      .rounded {
        border-radius: 0.35rem;
      }

      .border-t {
        border-top-width: 1px;
      }

      .border-b-4 {
        border-bottom-width: 4px;
      }

      .border-gray-200 {
        --tw-border-opacity: 1;
        border-color: rgba(229, 231, 235, var(--tw-border-opacity));
      }

      .border-indigo-400 {
        --tw-border-opacity: 1;
        border-color: rgba(129, 140, 248, var(--tw-border-opacity));
      }

      .border-opacity-25 {
        --tw-border-opacity: 0.25;
      }

      .hover\:border-opacity-100:hover {
        --tw-border-opacity: 1;
      }

      .bg-white {
        --tw-bg-opacity: 1;
        background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
      }

      .bg-gray-100 {
        --tw-bg-opacity: 1;
        background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
      }

      .bg-gray-300 {
        --tw-bg-opacity: 1;
        background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
      }

      .bg-yellow-100 {
        --tw-bg-opacity: 1;
        background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
      }

      .hover\:bg-indigo-400:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(129, 140, 248, var(--tw-bg-opacity));
      }

      .p-4 {
        padding: 1rem;
      }

      .p-8 {
        padding: 2rem;
      }

      .p-12 {
        padding: 3rem;
      }

      .px-1 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
      }

      .py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }

      .py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
      }

      .pt-8 {
        padding-top: 2rem;
      }

      .pt-12 {
        padding-top: 3rem;
      }

      .text-center {
        text-align: center;
      }

      .text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }

      .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
      }

      .text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
      }

      .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
      }

      .text-6xl {
        font-size: 3.75rem;
        line-height: 1;
      }

      .font-bold {
        font-weight: 700;
      }

      .leading-normal {
        line-height: 1.5;
      }

      .text-gray-400 {
        --tw-text-opacity: 1;
        color: rgba(156, 163, 175, var(--tw-text-opacity));
      }

      .text-gray-600 {
        --tw-text-opacity: 1;
        color: rgba(75, 85, 99, var(--tw-text-opacity));
      }

      .text-gray-800 {
        --tw-text-opacity: 1;
        color: rgba(31, 41, 55, var(--tw-text-opacity));
      }

      .text-indigo-600 {
        --tw-text-opacity: 1;
        color: rgba(79, 70, 229, var(--tw-text-opacity));
      }

      .hover\:text-white:hover {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

      *,
      ::before,
      ::after {
        --tw-shadow: 0 0 #0000;
      }

      .shadow-lg {
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
          0 4px 6px -2px rgba(0, 0, 0, 0.05);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }

      *,
      ::before,
      ::after {
        --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59, 130, 246, 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
      }

      .drop-shadow-lg {
        --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04))
          drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
      }

      @media (min-width: 640px) {
        .sm\:mt-0 {
          margin-top: 0px;
        }

        .sm\:w-1\/2 {
          width: 50%;
        }

        .sm\:flex-row {
          flex-direction: row;
        }

        .sm\:text-8xl {
          font-size: 6rem;
          line-height: 1;
        }

        .sm\:p-12 {
          padding: 3rem;
        }
      }

      @media (min-width: 768px) {
      }

      @media (min-width: 1024px) {
      }

      @media (min-width: 1280px) {
      }

      @media (min-width: 1536px) {
      }
    </style>
  </head>
  <body class="bg-gray-100">
    <div class="max-w-4xl m-auto">
      <header>
        <h1
          class="
            text-6xl
            sm:text-8xl
            text-center
            my-20
            font-bold
            drop-shadow-lg
            text-gray-800
          "
        >
          随机图文
        </h1>
      </header>
      <main>
        <div class="p-4 pt-12 sm:p-12">
          <h2 class="text-3xl text-center font-bold mb-4 text-gray-800">
            使用教程
          </h2>
          <div class="text-center py-6">
            <span class="text-xl text-center my-8 mt-12 border-b-4"
              >随机文字</span
            >
          </div>
          <div
            class="
              text-gray-600 text-xl
              leading-normal
              rounded
              shadow-lg
              p-8
              bg-white
            "
          >
            <div class="flex flex-col sm:flex-row">
              <div class="w-full sm:w-1/2">
                <h3 class="text-indigo-600 mb-1">词语</h3>
                <p class="text-gray-400 text-sm">
                  /<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >num</span
                  >w
                </p>
              </div>
              <div class="w-full sm:w-1/2 text-lg mt-12 sm:mt-0 overflow-auto">
                <ul>
                  <li>
                    <strong class="text-gray-600">五个随机词</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/5w"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/5w</a
                      >
                    </p>
                  </li>
                  <li class="mt-4">
                    <strong class="text-gray-600">五个随机词数组</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/5w,"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/5w,</a
                      >
                    </p>
                  </li>
                </ul>
              </div>
            </div>
            <div
              class="
                flex flex-col
                sm:flex-row
                mt-8
                pt-8
                border-t border-gray-200
              "
            >
              <div class="w-full sm:w-1/2">
                <h3 class="text-indigo-600 mb-1">句子</h3>
                <p class="text-gray-400 text-sm">
                  /<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >num</span
                  >s
                </p>
              </div>
              <div class="w-full sm:w-1/2 text-lg mt-12 sm:mt-0 overflow-auto">
                <ul>
                  <li>
                    <strong class="text-gray-600">十个随机句子</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/10s"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/10s</a
                      >
                    </p>
                  </li>
                  <li class="mt-4">
                    <strong class="text-gray-600">五个随机句子数组</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/5s,"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/5s,</a
                      >
                    </p>
                  </li>
                </ul>
              </div>
            </div>
            <div
              class="
                flex flex-col
                sm:flex-row
                mt-8
                pt-8
                border-t border-gray-200
              "
            >
              <div class="w-full sm:w-1/2">
                <h3 class="text-indigo-600 mb-1">段落</h3>
                <p class="text-gray-400 text-sm">
                  /<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >num</span
                  >p
                </p>
              </div>
              <div class="w-full sm:w-1/2 text-lg mt-12 sm:mt-0 overflow-auto">
                <ul>
                  <li>
                    <strong class="text-gray-600">三个随机段落</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/3p"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/3p</a
                      >
                    </p>
                  </li>
                  <li class="mt-4">
                    <strong class="text-gray-600">三个随机段落数组</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/3p,"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/3p,</a
                      >
                    </p>
                  </li>
                </ul>
              </div>
            </div>
            <div
              class="
                flex flex-col
                sm:flex-row
                mt-8
                pt-8
                border-t border-gray-200
              "
            >
              <div class="w-full sm:w-1/2">
                <h3 class="text-indigo-600 mb-1">中文句子</h3>
                <p class="text-gray-400 text-sm">
                  /<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >num</span
                  >c
                </p>
              </div>
              <div class="w-full sm:w-1/2 text-lg mt-12 sm:mt-0 overflow-auto">
                <ul>
                  <li>
                    <strong class="text-gray-600">三个随机中文句子</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/3c"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/3c</a
                      >
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="text-center py-6 mt-10">
            <span class="text-xl text-center my-8 mt-12 border-b-4"
              >占位图</span
            >
          </div>
          <div
            class="
              text-gray-600 text-xl
              leading-normal
              rounded
              shadow-lg
              p-8
              bg-white
            "
          >
            <div class="flex flex-col sm:flex-row">
              <div class="w-full sm:w-1/2">
                <h3 class="text-indigo-600 mb-1">图片</h3>
                <p class="text-gray-400 text-sm">
                  /<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >width</span
                  >x<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >height</span
                  >.png
                </p>
                <p class="text-gray-400 text-sm mt-1">
                  /<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >width</span
                  >x<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >height</span
                  >.jpg
                </p>
              </div>
              <div class="w-full sm:w-1/2 text-lg mt-12 sm:mt-0 overflow-auto">
                <ul>
                  <li>
                    <strong class="text-gray-600">300×200 PNG image</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/300x200.png"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/300x200.png</a
                      >
                    </p>
                  </li>
                  <li class="mt-4">
                    <strong class="text-gray-600">600×400 JPG image</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/600x400.jpg"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/600x400.jpg</a
                      >
                    </p>
                  </li>
                </ul>
              </div>
            </div>
            <div
              class="
                flex flex-col
                sm:flex-row
                mt-8
                pt-8
                border-t border-gray-200
              "
            >
              <div class="w-full sm:w-1/2">
                <h3 class="text-indigo-600 mb-1">图片颜色</h3>
                <p class="text-gray-400 text-sm">
                  /<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >width</span
                  >x<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >height</span
                  >.png,<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >bgcolor</span
                  >,<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >textcolor</span
                  >
                </p>
                <p class="text-gray-400 text-sm mt-1">
                  /<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >width</span
                  >x<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >height</span
                  >.jpg,<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >bgcolor</span
                  >,<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >textcolor</span
                  >
                </p>
              </div>
              <div class="w-full sm:w-1/2 text-lg mt-12 sm:mt-0 overflow-auto">
                <ul>
                  <li class="mt-4">
                    <strong class="text-gray-600"
                      >600×400 JPG 背景色为黑色 文字颜色为白色</strong
                    >
                    <p>
                      <a
                        href="http://code.alger.fun/600x400.jpg,000000,ffffff"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/600x400.jpg,000000,ffffff</a
                      >
                    </p>
                  </li>
                </ul>
              </div>
            </div>
            <div
              class="
                flex flex-col
                sm:flex-row
                mt-8
                pt-8
                border-t border-gray-200
              "
            >
              <div class="w-full sm:w-1/2">
                <h3 class="text-indigo-600 mb-1">随机背景图</h3>
                <p class="text-gray-400 text-sm">
                  /<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >width</span
                  >x<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >height</span
                  >
                </p>
              </div>
              <div class="w-full sm:w-1/2 text-lg mt-12 sm:mt-0 overflow-auto">
                <ul>
                  <li>
                    <strong class="text-gray-600">500*500的随机背景图</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/500*500"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/500*500</a
                      >
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="text-center py-6">
            <span class="text-xl text-center my-8 mt-12 border-b-4">音乐</span>
          </div>
          <div
            class="
              text-gray-600 text-xl
              leading-normal
              rounded
              shadow-lg
              p-8
              bg-white
            "
          >
            <div
              class="
                flex flex-col
                sm:flex-row
                mt-8
                pt-8
                border-t border-gray-200
              "
            >
              <div class="w-full sm:w-1/2">
                <h3 class="text-indigo-600 mb-1">音乐解析</h3>
                <p class="text-gray-400 text-sm">
                  /music?id=<span
                    class="
                      bg-gray-300
                      rounded
                      px-1
                      mx-px
                      inline-block
                      text-indigo-600
                    "
                    >id</span
                  >
                </p>
              </div>
              <div class="w-full sm:w-1/2 text-lg mt-12 sm:mt-0 overflow-auto">
                <ul>
                  <li>
                    <strong class="text-gray-600">根据id获取音乐链接</strong>
                    <p>
                      <a
                        href="http://code.alger.fun/music?id=1892509237"
                        class="
                          bg-yellow-100
                          text-indigo-600
                          hover:bg-indigo-400 hover:text-white
                          rounded
                          inline-block
                          px-1
                        "
                        >http://code.alger.fun/music?id=1892509237</a
                      >
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </main>
      <footer class="text-center py-8">
        <div class="mb-4">制作于2021.10.09 🐱‍👓</div>
        <a
          href="https://github.com/algerkong"
          class="
            text-indigo-600
            mt-4
            border-b-4 border-indigo-400 border-opacity-25
            hover:border-opacity-100
          "
          >AlgerKong</a
        >
        <p class="mt-4">特别感谢 CodingStartup</p>
      </footer>
    </div>

    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-6YVBM3DPYR"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag("js", new Date())

      gtag("config", "G-6YVBM3DPYR")
    </script>
  </body>
</html>
